<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
          name="viewport">
    <title>发布公益项目-链上善行</title>
    <!-- Favicon and Touch Icons -->
    <link href="common/favicon1.png" rel="shortcut icon" type="image/png">
    <link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

    <link rel="stylesheet" href="background/modules/summernote/summernote-lite.css">
    <link rel="stylesheet" href="background/modules/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="background/css/demo.css">
    <link rel="stylesheet" href="background/css/style.css">
    <!--引入Jquery-->
    <script src="common/js/jquery-3.4.1.js"></script>
    <!--引入MarkDown-->
    <link rel="stylesheet" type="text/css" href="common/EditorMD/lib/codemirror/codemirror.min.css"/>
    <link rel="stylesheet" type="text/css" href="common/EditorMD/css/editormd.css"/>

    <style>
        .itema{
            margin-top: 10px;
            font-weight: bold;

        }
        .notification-btn {
            border: none;
            background-color: transparent;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);;
        }

        .notification.success {
            background-color: #e1f3d8;
            color: #4caf50;
        }

        .notification.warning {
            background-color: #fffbe6;
            color: #ffca28;
        }

        .notification.info {
            background-color: #e6f7ff;
            color: #2196f3;
        }

        .notification.error {
            background-color: #ffebee;
            color: #f44336;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="main-wrapper">
        <div class="navbar-bg"></div>
        <div th:replace="commons/admin-bar::navbar(currUri='new-project')"></div>
        <div th:replace="commons/admin-bar::sidebar(currUri='new-project')"></div>

        <div class="main-content">
            <section class="section">
                <h1 class="section-header">
                    <div style="color: #000000;font-family: 'Dancing Script', cursive;"><i class="ion ion-heart"></i> 发布公益项目</div>
                </h1>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-12" style="height: 800px">
                        <input id="title" name="title" type="text" style="margin-bottom: 10px" class="form-control"
                               autocomplete="off" placeholder="填写公益项目标题">
                        <div id="editormd">
                            <textarea id="content" name="content" style="display:none;"></textarea>
                        </div>
                        <input type="hidden" id="imgPath" name="imgPath">
                    </div>
                </div>
                <div class="row" style="margin-top: 80px">
                    <div class="col-lg-12 col-md-12 col-12">
                        <div class="card mb-3">
                            <div class="card-header">
                                项目背景
                            </div>
                            <div class="card-body">
                                <textarea id="background" type="text" style="margin-bottom: 10px" class="form-control"
                                          autocomplete="off" placeholder="填写公益项目的背景..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-12">
                        <div class="card mb-3">
                            <div class="card-header">
                                其他信息
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-2 col-md-3 col-4">
                                        <input id="theme" type="text" style="margin-bottom: 10px" class="form-control"
                                               autocomplete="off" placeholder="填写公益项目的主题...">
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-4">
                                        <input id="target" type="text" style="margin-bottom: 10px" class="form-control"
                                               autocomplete="off" placeholder="填写公益项目的目的...">
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-4">
                                        <input id="sponsor" type="text" style="margin-bottom: 10px" class="form-control"
                                               autocomplete="off" placeholder="填写公益项目的赞助商...">
                                    </div>
                                    <div class="col-lg-2 col-md-3 col-4">
                                        <input id="goal" type="text" style="margin-bottom: 10px" class="form-control"
                                               autocomplete="off" placeholder="填写公益项目的目标筹集金额...">
                                    </div>
                                    <div class="col-lg-2.4 col-md-3 col-4">
                                        <select type="text" style="margin-bottom: 10px" class="form-control" onchange="getSelectedOption(this)">
                                            <option>请写公益项目的所属类型</option>
                                            <option>生活救助</option>
                                            <option>医疗救助</option>
                                            <option>教育救助</option>
                                            <option>住房救助</option>
                                            <option>灾害救助</option>
                                            <option>教育捐赠</option>
                                            <option>奖助学金</option>
                                            <option>师资奖励</option>
                                            <option>学科建设</option>
                                            <option>教育创新</option>
                                            <option>生态保护</option>
                                            <option>清洁能源与节能减排</option>
                                            <option>环保教育</option>
                                            <option>环保科研</option>
                                            <option>贫困地区环境改善</option>
                                        </select>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-12">
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-6 col-md-6 col-6">
                                                    <img id="cover_img" class="img-thumbnail"
                                                         style="width:300px; height:160px;"
                                                         src="https://s1.ax1x.com/2020/10/18/0X5wRg.png">
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-6">
                                                    <div class="card-header">
                                                        上传公益项目封面
                                                    </div>
                                                    <div class="card-body">
                                                        <input type="file" class="form-control" id="cover"
                                                               onchange="uploadCover()">
                                                    </div>
                                                    <div class="card-footer">
                                                        <small class="text-danger">若未上传封面，系统将随机设置封面！</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <button class="btn btn-success" th:onclick="publishProject()">发布公益项目</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="notifications5" style=""></div>
                <button id="success_not" class="notification-btn success" onclick="openSuccess()" style="display: none">成功</button>
                <button id="error_not" className="notification-btn error" onClick="openError()" style="display: none">错误</button>
            </section>
        </div>
        <div th:replace="commons/admin-bar::footer"></div>
    </div>
</div>

<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/popper.js"></script>
<script src="background/modules/tooltip.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>

<script src="background/modules/chart.min.js"></script>
<script src="background/modules/summernote/summernote-lite.js"></script>

<script src="background/js/scripts.js"></script>
<script src="background/js/custom.js"></script>

<!--引入MarkDown-->
<script type="text/javascript" src="common/EditorMD/editormd.amd.min.js"></script>
<script src="background/js/bootstrap-datetimepicker.min.js"></script>
<script src="background/js/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
    function createNotification(type, title, message) {
        const notificationDiv = document.createElement('div');
        notificationDiv.classList.add('notification', type, 'show');

        const titleElement = document.createElement('strong');
        titleElement.textContent = title;
        notificationDiv.appendChild(titleElement);

        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        notificationDiv.appendChild(messageElement);
        const notificationsContainer = document.getElementById('notifications5');
        notificationsContainer.appendChild(notificationDiv);

        setTimeout(() => {
            notificationDiv.classList.remove('show');
            setTimeout(() => {
                notificationsContainer.removeChild(notificationDiv);
            }, 300);
        }, 3000);
    }

    function openSuccess() {
        createNotification('success', '发布成功');
    }

    function openWarning() {
        createNotification('warning', '警告', '这是一条警告的提示消息');
    }

    function openInfo() {
        createNotification('info', '消息', '这是一条消息的提示消息');
    }

    function openError() {
        createNotification('error', '错误', '您输入的信息有错，请重新输入');
    }
    var selected;
    //map
    var reflect = {
        "生活救助" : 1,
        "医疗救助" : 2,
        "教育救助" : 3,
        "住房救助" : 4,
        "灾害救助" : 5,
        "教育捐赠" : 6,
        "奖助学金" : 7,
        "师资奖励" : 8,
        "学科建设" : 9,
        "教育创新" : 10,
        "生态保护" : 11,
        "清洁能源与节能减排" : 12,
        "环保教育" : 13,
        "环保科研" : 14,
        "贫困地区环境改善" : 15
    }
    function getSelectedOption(selectElement) {
        var selectedOption = selectElement.options[selectElement.selectedIndex].text;
        selected = reflect[selectedOption];
    }
    function publishProject() {
        let title = $("#title").val().trim();
        let content = $("#content").val().trim();
        let background = $("#background").val().trim();
        let target = $("#target").val().trim();
        let theme = $("#theme").val().trim();
        let sponsor = $("#sponsor").val().trim();
        let imgPath = $("#imgPath").val().trim();
        let goal = $("#goal").val().trim();
        let purposeDetailId = selected;
        if (title == ''){
            alert("请输入标题！");
            return;
        }
        if (content == ''){
            alert("请输入内容！");
            return;
        }
        if (background == ''){
            alert("请输入背景！");
            return;
        }
        if (target == ''){
            alert("请输入目的！");
            return;
        }
        if (theme == ''){
            alert("请输入主题！");
            return;
        }
        if (sponsor == ''){
            alert("请输入赞助商！");
            return;
        }
        if (goal == ''){
            alert("请输入目标筹集金额！");
            return;
        }
        $.ajax({
            type: "POST",
            url: "publishProject",
            data: {imgPath:imgPath,name:title,content:content,background:background,target:target,theme:theme,sponsor:sponsor,purposeDetailId : purposeDetailId,goal: goal},
            dataType: "json",
            success: function(data){
                if (data['code']== 200){
                    var element = document.querySelector('#success_not');
                    element.click();
                    setTimeout(function() {
                        window.location.href = "/blockchain-kindness/admin-project";
                    }, 2000);
                }else {
                    alert("服务器发生了一个错误");
                }
            }
        });
    }

    $(function () {
		var picker1 = $('#datetimepicker1').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn'),
			//minDate: '2016-7-1'
		});
		var picker2 = $('#datetimepicker2').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn')
		});
		//动态设置最小值
		picker1.on('dp.change', function (e) {
			picker2.data('DateTimePicker').minDate(e.date);
		});
		//动态设置最大值
		picker2.on('dp.change', function (e) {
			picker1.data('DateTimePicker').maxDate(e.date);
		});
	});

    var editor;
    $(function () {
        editor = editormd("editormd", {
            placeholder: "此处开始编写文章的内容...",
            path: 'common/EditorMD/lib/',
            saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "image/article",//注意你后端的上传图片服务地址
            toolbarIcons: function () {
                // Or return editormd.toolbarModes[name]; // full, simple, mini
                return ["undo", "redo", "|", "bold", "italic", "quote", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "code", "code-block", "table", "html-entities", "|", "watch", "preview", "clear", "|", "help"]
            },
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,
            codeFold: true,
            watch: true
        });
        //监听粘贴服务
        document.addEventListener('paste', function (event) {
            var items = (event.clipboardData || window.clipboardData).items;
            var file = null;
            if (items && items.length) {
                // 搜索剪切板items
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile();
                        break;
                    }
                }
            } else {
                alert("当前浏览器不支持");
                return;
            }
            if (!file) {
                return;
            }
            // 此时file就是我们的剪切板中的图片对象
            // 这里是上传
            var xhr = new XMLHttpRequest();
            // 上传结束
            xhr.onload = function () {

            };
            xhr.onerror = function () {
                alert("网络异常，上传失败!");
            };
            var formData = new FormData();
            formData.append("editormd-image-file", file);
            xhr.open('POST', 'image/article', true);
            xhr.send(formData);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        //5.处理返回的结果
                        var obj = xhr.responseText;
                        var objarr = eval("(" + obj + ")");
                        if (objarr["success"] == 1) {
                            editor.insertValue("![](" + objarr["url"] + ")");
                        } else {
                            alert("粘贴图片失败!");
                        }
                    }
                }
            }
        });
    });
</script>
<script src="common/js/project.js"></script>
<script src="common/js/article.js"></script>
</body>
</html>
